<template>
  <div class="content-right-wrap">
    <Card :bordered="false">
      <div slot="title" class="clearfix">
        <span class="fl card-tit">用气量环比图</span>
        <div class="fr">
          <DatePicker
            type="daterange"
            size="small"
            placement="bottom-end"
            placeholder="选择日期"
            v-model="zidanfilterDate"
            split-panels
            transfer
            @on-change="changeZidanDateHandle"
          ></DatePicker>
        </div>
      </div>
      <div class="chart-box">
        <div class="zidan-box">
          <div class="zidan-item" v-for="(item, index) of zidanList" :key="index">
            <h-bullet :id="'zidan' + index" :chartData="item" :defaultOptions="hBulletOptions" />
          </div>
        </div>
        <Spin fix size="large" v-if="zidanLoading">
          <Icon type="ios-loading" size="20" class="demo-spin-icon-load"></Icon>
          <div>图表生成中...</div>
        </Spin>
      </div>
    </Card>
  </div>
</template>
<script>
import { merge, each } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { hBulletOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('dailyview')

export default {
  name: 'dailyview-content-right',
  components: {
    HBullet: () => import('@/commons/charts/HBullet')
  },
  data() {
    return {
      zidanList: [],
      zidanfilterDate: undefined
    }
  },
  computed: {
    ...mapState(['zidanLoading']),
    hBulletOptions() {
      return hBulletOptions
    }
  },
  mounted() {
    this.getZidanList()
  },
  methods: {
    ...mapActions(['loadZidanData', 'changeCurrentSelectedGasCls', 'changeHeatMapSwiperState']),
    async getZidanList(params) {
      const { code, date } = await this.loadZidanData(params)
      if (code === 200) {
        this.modifyZidanData(date)
      }
    },
    /**
     * @msg: 整理子弹图数据
     * @param {type}
     * @return:
     */
    modifyZidanData(data) {
      const _retList = []
      const _this = this
      each(data, (item, index) => {
        const { meterGasClass, day, toDay } = item
        const _cateList = []
        const _serList = []
        _cateList.push(meterGasClass)
        _serList.push({
          y: day,
          target: toDay
        })
        _retList.push(
          merge({}, hBulletOptions, {
            plotOptions: {
              series: {
                cursor: 'pointer',
                events: {
                  click: function(e) {
                    _this.zidanSeriesClickHandle(e, this)
                  }
                }
              }
            },
            xAxis: {
              categories: _cateList
            },
            series: [
              {
                data: _serList
              }
            ]
          })
        )
      })
      this.zidanList = _retList
    },
    changeZidanDateHandle(dates) {
      this.changeHeatMapSwiperState(true)
      this.getZidanList({
        toDay: dates[0] || undefined,
        day: dates[1] || undefined
      })
    },
    zidanSeriesClickHandle(arg, self) {
      this.changeHeatMapSwiperState(true)
      const { point } = arg
      this.changeCurrentSelectedGasCls(point.category)
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.content-right-wrap {
  width: 100%;
  height: 100%;

  .chart-box {
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .zidan-box {
    overflow-y: auto;

    .zidan-item {
      height: 100px;
    }
  }

  @{deep} .ivu-card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>
